<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <title>工资计算系统2.0</title>
  <style>
    .pointcalculate,
    .pointcontent {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .pointcontentmobile {
      display: block;
      text-align: center;
    }

    .pointcontentmobile .el-input-number {
      width: 80%;
      margin: 5px 0;
    }

    .pointcalculate {
      margin: 10px 0;
    }

    .pointcontent {
      flex: 1
    }

    .result {
      font-size: 20px;
    }

    .valuestyle {
      font-weight: bold;
      color: #409EFF;
    }

    .resultitem {
      margin: 10px 0;
    }

    .el-input-number>.el-input::after {
      content: var(--el-input-number-unit);
      position: absolute;
      right: 50px;
      color: #8D8D8D;
    }

    .navbar {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .navbarmobile {
      text-align: center;
    }

    @keyframes mysnow {
      0% {
        bottom: 100%;
        opacity: 0;
      }

      50% {
        opacity: 1;
        transform: rotate(720deg);
      }

      100% {
        transform: rotate(0deg);
        opacity: 0;
        bottom: 0%;
      }
    }

    .container {
      position: fixed;
    }

    .pic {
      position: absolute;
      opacity: 0;
      animation: mysnow 5s;
      height: 30px;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-row :class="isPhone?'navbarmobile':'navbar'">
      <img src="/salary-calculation/images/wxrblogo.png" style="margin-right:20px">
      <h2>🏦 工资计算系统 2.0</h2>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :lg="12">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-tag>工资计算</el-tag>
              <el-button style="float: right; padding: 3px 0" type="text" @click="pricereset">重置</el-button>
            </div>
            <div v-for="(item,index) in 8" :key="index" class="pointcalculate">
              <div style="width:50px;"> {{ruleForm.standard[index].name}}</div>
              <div :class="isPhone?'pointcontentmobile':'pointcontent'">
                <el-input-number v-model.trim="ruleForm.point[index]" :precision="1" :step="0.5">
                </el-input-number>
                <el-input-number v-model.trim="ruleForm.weekdaypoint[index]" :precision="1" :step="0.5"
                  style="--el-input-number-unit: '双'">
                </el-input-number>

                <el-input-number v-model.trim="ruleForm.planpoint[index]" :precision="1" :step="0.5"
                  style="--el-input-number-unit: '策划'">
                </el-input-number>
              </div>
            </div>
            <el-radio-group v-model="ifcoefficient" style="width:100%;margin:20px 0">
              <el-radio :label="1" border>有系数</el-radio>
              <el-radio :label="0" border>无系数</el-radio>
            </el-radio-group>
            <el-button style="width: 100%;" @click="calculatesalary" type="primary" plain>计算</el-button>
          </el-card>

        </div>
      </el-col>
      <el-col :xs="24" :lg="6">
        <div class="grid-content bg-purple-light">
          <div id="snowFlow">
          </div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-tag>计算结果</el-tag>
            </div>
            <div class="result" v-if="ifcalculate">
              <div class="resultitem">系数分值为：<span class="valuestyle">{{coefficientpoint}}</span></div>
              <div class="resultitem">系数为：<span class="valuestyle">{{coefficient}}</span></div>
              <div class="resultitem">重点稿分值为：<span class="valuestyle">{{keypoint}}</span></div>
              <div class="resultitem">非重点稿分值为：<span class="valuestyle">{{normalpoint}}</span></div>
              <div class="resultitem">策划分值为:<span class="valuestyle">{{planpoint}}</span></div>
              <div class="resultitem">总分值为：<span class="valuestyle">{{totalpoint}}</span></div>
              <el-divider></el-divider>
              <div class="resultitem">月度绩效奖大约为：<span class="valuestyle">900</span></div>
              <div class="resultitem">目标奖约为：<span class="valuestyle">200 ~ 500</span></div>
              <el-divider></el-divider>
              <div class="resultitem">本月奖金约为：<div class="valuestyle" style="font-size: 30px">{{emoji}} {{salary+200}} ~
                  {{salary+500}}</div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :lg="6">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-tag>系数标准</el-tag>
            </div>
            <el-radio-group v-model="coefficientstandard" style="width:100%;margin:20px 0" size="small">
              <el-radio :label="1" border>视频组</el-radio>
              <el-radio :label="0" border>美编组</el-radio>
            </el-radio-group>
            <div>
              <el-table :data="ruleForm.standard" style="width: 100%" border stripe>
                <el-table-column prop="name" label="等级">
                </el-table-column>
                <el-table-column prop="point" label="分值">
                </el-table-column>
              </el-table>
              <el-divider></el-divider>
              <el-table :data="ruleForm.pointstandard" style="width: 100%" border stripe>
                <el-table-column label="系数分值" prop="coefficientpoint">
                </el-table-column>
                <el-table-column label="系数" prop="coefficient">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</body>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        ifcoefficient: 1,
        coefficientstandard: 1,
        ifcalculate: false,
        num: 0,
        coefficient: 0,
        coefficientpoint: 0,
        keypoint: 0,
        normalpoint: 0,
        planpoint: 0,
        totalpoint: 0,
        salary: 0,
        ruleForm: {
          standard: [{
            name: 'A',
            point: 70
          },
          {
            name: 'B+',
            point: 55
          },
          {
            name: 'B',
            point: 45
          }, {
            name: 'C+',
            point: 30
          }, {
            name: 'C',
            point: 20
          }, {
            name: 'D+',
            point: 10
          }, {
            name: 'D',
            point: 6
          }, {
            name: 'E',
            point: 2
          }],
          pointstandard: [{
            coefficientpoint: 120,
            coefficient: 1.1
          }, {
            coefficientpoint: 150,
            coefficient: 1.3
          }, {
            coefficientpoint: 200,
            coefficient: 1.4
          }, {
            coefficientpoint: 250,
            coefficient: 1.5
          }, {
            coefficientpoint: 300,
            coefficient: 1.7
          }],
          point: [0, 0, 0, 0, 0, 0, 0, 0],
          weekdaypoint: [0, 0, 0, 0, 0, 0, 0, 0],
          planpoint: [0, 0, 0, 0, 0, 0, 0, 0]
        },
        isPhone: false,
        emoji: ''
      }
    },
    components: {},
    created () {
      var info = navigator.userAgent;
      var isPhone = /mobile/i.test(info);
      this.isPhone = isPhone
    },
    watch: {
      coefficientstandard (newval, oldval) {
        if (newval === 0) {
          this.ruleForm.standard = [{
            name: 'A',
            point: 60
          },
          {
            name: 'B+',
            point: 55
          },
          {
            name: 'B',
            point: 35
          }, {
            name: 'C+',
            point: 25
          }, {
            name: 'C',
            point: 15
          }, {
            name: 'D+',
            point: 9
          }, {
            name: 'D',
            point: 5
          }, {
            name: 'E',
            point: 2
          }]
        } else {
          this.ruleForm.standard = [{
            name: 'A',
            point: 70
          },
          {
            name: 'B+',
            point: 55
          },
          {
            name: 'B',
            point: 45
          }, {
            name: 'C+',
            point: 30
          }, {
            name: 'C',
            point: 20
          }, {
            name: 'D+',
            point: 10
          }, {
            name: 'D',
            point: 6
          }, {
            name: 'E',
            point: 2
          }]
        }
      }
    },
    methods: {
      snowFlow (left, height, src) {
        var container = document.createElement('div');
        var pic = document.createElement('img');
        var snowFlow = document.getElementById('snowFlow');
        pic.className = 'pic';
        container.className = 'container';
        snowFlow.appendChild(container);
        container.appendChild(pic);
        container.style.left = left + 'px';
        container.style.height = height + 'px';
        pic.src = src;
        setTimeout(function () {
          snowFlow.removeChild(container);
        }, 5000);
      },
      pricereset () {
        this.ruleForm.point = [0, 0, 0, 0, 0, 0, 0, 0]
        this.ruleForm.weekdaypoint = [0, 0, 0, 0, 0, 0, 0, 0]
        this.ruleForm.planpoint = [0, 0, 0, 0, 0, 0, 0, 0]
        this.ifcalculate = false
      },
      calculatesalary () {
        let coefficient = 0
        let coefficientpoint = 0
        let point = 0
        let keypoint = 0
        let normalpoint = 0
        let that = this
        if (this.ifcoefficient == 1) {
          for (let i = 0; i < 8; i++) {
            coefficientpoint += this.ruleForm.point[i] * this.ruleForm.standard[i].point
          }
          if ((coefficientpoint > 120 || coefficient == 120) && coefficientpoint < 150) {
            coefficient = 1.1
          } else if ((coefficientpoint > 150 || coefficient == 150) && coefficientpoint < 200) {
            coefficient = 1.3
          } else if ((coefficientpoint > 200 || coefficient == 200) && coefficientpoint < 250) {
            coefficient = 1.4
          } else if ((coefficientpoint > 250 || coefficient == 250) && coefficientpoint < 300) {
            coefficient = 1.5
          } else if (coefficientpoint > 300 || coefficientpoint == 300) {
            coefficient = 1.7
          } else {
            coefficient = 1
          }
          this.coefficient = coefficient
          this.coefficientpoint = coefficientpoint
        }
        else {
          this.coefficient = 1
          this.coefficientpoint = 0
        }

        let weekdaypoint = 0
        let planpoint = 0
        for (let i = 0; i < 5; i++) {
          keypoint += this.ruleForm.point[i] * this.ruleForm.standard[i].point
          weekdaypoint += this.ruleForm.weekdaypoint[i] * this.ruleForm.standard[i].point
        }
        keypoint = keypoint * this.coefficient + weekdaypoint
        for (let i = 5; i < 8; i++) {
          normalpoint += (this.ruleForm.point[i] + this.ruleForm.weekdaypoint[i]) * this.ruleForm.standard[i].point
        }
        for (let i = 0; i < this.ruleForm.planpoint.length; i++) {
          planpoint += this.ruleForm.planpoint[i] * this.ruleForm.standard[i].point
        }
        this.keypoint = keypoint
        this.normalpoint = normalpoint
        this.planpoint = planpoint
        this.totalpoint = keypoint + normalpoint + planpoint
        this.salary = this.totalpoint * 10 + 900
        if (this.salary < 5000) {
          this.emoji = '🤬'
        } else if (this.salary > 5000 && this.salary < 7000) {
          this.emoji = '😑'
        } else if (this.salary > 7000 && this.salary < 9000) {
          this.emoji = '🫡'
        } else if (this.salary > 9000 && this.salary < 10000) {
          this.emoji = '🤓'
        } else if (this.salary > 10000) {
          this.emoji = '🤪'
        }
        this.ifcalculate = true
        if (!this.isPhone) {
          setInterval(function () {
            var left = Math.random() * window.innerWidth;
            var height = Math.random() * window.innerHeight;
            var src = '/salary-calculation/images/money.png';
            that.snowFlow(left, height, src);
          }, 300)
        }
      },
    }
  })
</script>

</html>